import React, { Component } from 'react';
import {
  StyleSheet, Text, View, ScrollView, DeviceEventEmitter,
} from 'react-native';
import { Accordion } from 'native-base';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import produce from 'immer';

import theme from '../../../../native-base-theme/variables';
import * as techDocService from '../../../../services/techDoc';
import { UtilToast } from '../../../../utils/util-method';

class LubricationStandard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      datas: [],
    };
  }

  componentDidMount() {
    this.getDatas();
  }

  // 获取技术性能信息
  getDatas = async () => {
    try {
      DeviceEventEmitter.emit('showLoading', true);
      const { datas } = this.props;
      if (datas && datas.objType) {
        const data = await techDocService.tdLubrication({ objType: datas.objType });
        // const data = await techDocService.tdLubrication({ objType: 'RX_KYZGSZ' });
        DeviceEventEmitter.emit('showLoading', false);
        if (data && data.length > 0) {
          this.setState(produce(draft => {
            draft.datas = data;
          }));
        } else {
          UtilToast('该设备暂无润滑标准信息', 'danger');
        }
      } else {
        DeviceEventEmitter.emit('showLoading', false);
        UtilToast('没有设备信息', 'danger');
      }
    } catch (e) {
      console.log(e);
      DeviceEventEmitter.emit('showLoading', false);
    }
  }

  _renderHeader(item, expanded) {
    return (
      <View style={{
        flexDirection: 'row',
        padding: 8,
        marginTop: 8,
        marginLeft: 8,
        marginRight: 8,
        justifyContent: 'space-between',
        borderRadius: 4,
        alignItems: 'center',
        backgroundColor: 'rgba(255,255,255,0.2)',
      }}
      >
        <View style={{ flex: 1, flexDirection: 'column' }}>
          <View style={{ flex: 1, justifyContent: 'center' }}>
            <Text style={{ color: 'white' }}>{item.description}</Text>
          </View>
          <View style={{ flex: 1, justifyContent: 'center' }}>
            <Text style={{ color: 'white' }}>{item.lubeType}({item.lubeModel})</Text>
          </View>
        </View>
        {expanded
          ? <Icon style={{ fontSize: 24, color: 'white' }} name="chevron-up" />
          : <Icon style={{ fontSize: 24, color: 'white' }} name="chevron-down" />}
      </View>
    );
  }

  _renderContent(item) {
    return (
      <View style={{ backgroundColor: theme.myPrimary, marginLeft: 8, marginRight: 8 }}>
        <Text style={{ padding: 8, color: 'white' }}>
          部位编码：{item.splitCode}
        </Text>
        <Text style={{ padding: 8, color: 'white' }}>
          润滑定时：{item.lubricationCycle} 天
        </Text>
        <Text style={{ padding: 8, color: 'white' }}>
          化验周期：{item.testCycle} 天
        </Text>
      </View>
    );
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <View style={styles.containerView}>
          <Accordion
            style={{ borderWidth: 0 }}
            dataArray={this.state.datas}
            renderHeader={this._renderHeader}
            renderContent={this._renderContent}
          />
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.myPrimary,
    flexDirection: 'column',
  },
  containerView: {
    flex: 1,
  },
  title: {
    color: 'black',
    fontSize: 17,
    marginTop: 8,
  },
});

export default LubricationStandard;
